<template>
  <div id="XjrEditor" :style="{width}">
    <div ref="content" style="height:200px;width: 500px;background-color: white;overflow: scroll"></div>
    <div id="div1" class="toolbar" :style="{width:width+'px'}">
    </div>
    <div id="div2" @keyup.enter="sendMessage" class="text" :style="{width:width+'px',height: height+'px'}"> <!--可使用 min-height 实现编辑区域自动增加高度-->

    </div>
</div>
</template>

<script>
  import E from 'wangeditor'
    export default {
        name: "XjrEditor",
        data() {
            return {
                editor: null,
                editorContent: ''
            };
        },
        // catchData是一个类似回调函数，来自父组件，当然也可以自己写一个函数，主要是用来获取富文本编辑器中的html内容用来传递给服务端
        props: {
            catchData:{
                type:Function,
                default: function () {
                    console.log('当前编辑器内容：'+this.editorContent);
                }
            },
            width:{
                type:String,
                default:'500'
            },
            height:{
                type:String,
                default:'200'
            }
        }, // 接收父组件的方法
        methods:{
            sendMessage(){
                return this.$emit('sendMessageFunc');
            }
        },
        mounted() {
            this.editor = new E("#div1","#div2");
            // 编辑器的事件，每次改变会获取其html内容
            this.editor.customConfig.onchange = html => {
                this.editorContent =html;
                this.catchData(this.editorContent); // 把这个html通过catchData的方法传入父组件
            };
            this.editor.customConfig.menus = [
                // 菜单配置
                'head', // 标题
                'bold', // 粗体
                'fontSize', // 字号
                'fontName', // 字体
                'foreColor', // 文字颜色
                'link', // 插入链接
                'quote', // 引用
                'emoticon', // 表情
                'image', // 插入图片
                'table', // 表格
                'code', // 插入代码
            ];
            this.editor.create();// 创建富文本实例
    }

    }
</script>

<style scoped>
  .toolbar {
    border: 1px solid #ccc;
  }
  .text {
    border: 1px solid #ccc;
    background-color: white;
  }
</style>
